<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../style.css">

    <style>
        body {
            background: #f0f2f5;
            height: 100%;
            overflow-y: scroll;
        }

        .page-main {
            margin: 20px;

        }
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .copyright {
            position: fixed;
            bottom: 2px;
            right: 20px;
            border: solid 0px red;
            color: #c4c4c4;
        }
        .clearfix:after {
            clear: both
        }
        .item {
            margin-bottom: 18px;
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
        .item span{

        }
         .active{
            color:dodgerblue;
            cursor: pointer;
        }
        .box-card{
            height: 290px;
        }
        .info{
            color:grey;
        }
    </style>
</head>
<body>
<div class="page" id="page-vue">
    <div class="page-main">
        <el-row :gutter="16">
            <el-col :span="6">
                <el-card shadow="hover" >
                    <div slot="header" class="clearfix">
                        <span style="color:#aaa;">巡检排查</span>
                        <el-button @click="goPage('patrol')" style="float: right; padding: 0px 0" type="text">查看</el-button>
                    </div>
                    <el-row >
                        <el-col :span="12">

                            <div><span style="font-size:40px;color:#0081ff">{{summaryData.riskondealt}}</span>个未达标/总计</div>
                            <div style="margin-top: 10px">共{{summaryData.riskondealt+summaryData.riskdealted}}个</div>
                        </el-col>
                        <el-col :span="12">
                            <el-progress type="circle" :percentage="summaryData.risk_percent"></el-progress>
                        </el-col>
                    </el-row>

                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover">
                    <div slot="header" class="clearfix">
                        <span style="color:#aaa;">隐患整改</span>
                        <el-button @click="goPage('risk')" style="float: right; padding: 0px 0" type="text">查看</el-button>
                    </div>
                    <el-row>
                        <el-col :span="12">
                            <div><span style="font-size:40px;color:#0081ff">{{summaryData.wfondealt}}</span>个未达标/总计</div>
                            <div style="margin-top: 10px">共{{summaryData.wfdealted+summaryData.wfondealt}}个</div>
                        </el-col>
                        <el-col :span="12">
                            <el-progress type="circle" :percentage="summaryData.wf_percent"></el-progress>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover">
                    <div slot="header" class="clearfix">
                        <span style="color:#aaa;">应急培训</span>
                        <el-button @click="goPage('train')" style="float: right; padding: 0px 0" type="text">查看</el-button>
                    </div>
                    <el-row>
                        <el-col :span="12">
                            <div><span style="font-size:40px;color:#0081ff">{{summaryData.trainreaded}}</span>已执行</div>
                            <div style="margin-top: 10px">共{{summaryData.trainreaded + summaryData.trainnoread}}个</div>
                        </el-col>
                        <el-col :span="12">
                            <el-progress type="circle" :percentage="summaryData.train_percent"></el-progress>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover">
                    <div slot="header" class="clearfix">
                        <span style="color:#aaa;">通知公告</span>
                        <el-button @click="goPage('bbs')" style="float: right; padding: 0px 0" type="text">查看</el-button>
                    </div>
                    <el-row>
                        <el-col :span="12">
                            <div><span style="font-size:40px;color:#0081ff">{{summaryData.bbsreaded}}</span>已接收</div>
                            <div style="margin-top: 10px">共{{summaryData.bbsreaded +summaryData.bbsnoread }}个</div>
                        </el-col>
                        <el-col :span="12">
                            <el-progress type="circle" :percentage="summaryData.bbs_percent"></el-progress>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>


        <el-row :gutter="16" style="margin-top: 15px">
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>通知公告</span>
                        <el-button style="float: right; padding: 3px 0;color:#aaa" type="text" v-if="bbsData.length>4" @click="goPage('bbs')">全部<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                    </div>
                    <p v-for="(o,index) in bbsData" :key="o" class="text item active" @click="showBbs(index)">
                        {{o.bbsTitle}}
                    </p>
                    <template v-if="bbsData.length==0">
                      <p class="info">暂无公告</p>
                    </template>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>巡查情况</span>
                        <el-button style="float: right; padding: 3px 0;color:#aaa" type="text" v-if="patrol_list.length>4" @click="goHistory()">更多<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                    </div>
                    <!--<p v-for="(o,index) in patrol_list" :key="o" class="item ">-->
                      <!--<span>风险点名称：{{o.patrolName}}</span><span >巡检人：{{o.userName}}</span><span style="margin-right: 10%">{{o.processText}}</span>-->
                    <!--</p>-->
                    <table style="width: 100%" border="0" cellpadding="5" cellspacing="0">
                        <tr align="left">
                            <th>风险点名称</th>
                            <th>巡检人</th>
                            <th>巡检状态</th>
                        </tr>
                        <tr v-for="(o,index) in patrol_list" :key="o"  align="left">
                            <td>{{o.patrolName}}</td>
                            <td>{{o.userName}}</td>
                            <td>{{o.processText}}</td>
                        </tr>
                    </table>
                    <template v-if="patrol_list.length==0">
                        <p class="info">暂无巡查记录!</p>
                    </template>
                </el-card>
            </el-col>

        </el-row>



        <el-row :gutter="16" style="margin-top: 15px;padding-left: 10px;padding-right: 10px">
            <el-card >
                <div slot="header" class="clearfix">
                    <span>隐患情况</span>
                    <el-button style="float: right; padding: 3px 0;color:#aaa" type="text" @click="goWarning()">更多<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                </div>
                <div id="main" style="height:250px;"></div>
            </el-card>
        </el-row>
    </div>

        <div class="copyright">智慧校园安全防范平台    ©2019 技术支持：杭州开地信息科技</div>


</div>


<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GSkyZRDlTKcIqzerwITZvxee"></script>
<!--加载鼠标绘制工具-->

<script type='text/javascript' src='../../assets/bundle.js' charset='utf-8'></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type='text/javascript' src='../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage = new Vue({
        el: '#page-vue',
        data: {
            bbsData:[],
            patrol_list:[],
            summaryData:{},
        },
        methods: {
           drawChart(){
               //时段用量
               HttpUtil.get('Screen/dayStatictis', {}).success((res) => {
                   //index9
                   let chartData = {
                       xdata: [],
                       ydata: {
                           handy:[],
                           dangerous:[],
                       },
                   }
                   for (let key in res.data[0]) {
                       chartData.xdata.push(res.data[0][key].day);
                       // chartData.ydata.push(res.data[0][key].dangerous + res.data[0][key].handy);
                       chartData.ydata.handy.push(res.data[0][key].handy);
                       chartData.ydata.dangerous.push(res.data[0][key].dangerous);
                   }
               let myChart = echarts.init(document.getElementById('main'));
               // 指定图表的配置项和数据
               let option = {
                   title: {
                       text: '当月隐患分布',
                       left:'20px',
                       textStyle: {
                           color: "#436EEE",
                           fontSize: 17,
                       }
                   },
                   toolbox: {
                       show: true,
                       feature: {
                           dataView: {readOnly: false},
                           magicType: {type: ['line', 'bar']},
                           restore: {},
                           saveAsImage: {}
                       }
                   },
                   tooltip: {
                       trigger: "axis",
                   },
                   legend: {
                       itemWidth:15,
                       itemHeight:15,
                   },
                   xAxis: {
                       data:chartData.xdata,
                       splitLine:{
                           show:false,
                       },
                   },
                   yAxis: {
                       splitLine:{
                           show:false,
                       },
                   },
                   series: [{
                       name: '随手拍隐患',
                       type: 'line',
                       data:chartData.ydata.handy,
                       itemStyle:{
                           normal:{color:"#f37b1d"},
                       }
                   },{
                       name: '巡查隐患',
                       type: 'line',
                       data:  chartData.ydata.dangerous,
                       itemStyle:{
                           normal:{color:"#e54d42"},
                       }
                   }]
               };
               // 使用刚指定的配置项和数据显示图表。
               myChart.setOption(option);
               setTimeout(function (){
                   window.onresize = function () {
                       myChart.resize();
                   }
               },10)
               })
           },
            getBbs(){
               let param = {

               }
               if (SiteConfig.account.roleId == 2 ){
                   param={
                       pagesize:5,
                       ProjectNo:SiteConfig.account.projectNo,
                   }
               }else {
                   param={
                       pagesize:5,
                       UserId:SiteConfig.account.id
                   }
               }
                HttpUtil.get('CompanyBbs/BbsList',param).success((r)=>{
                    this.bbsData = r.data;
                })
            },
            getRisk(){
               let param = {

               }
               if (SiteConfig.account.roleId == 2 ){
                   param={
                       pagesize:5,
                       ProjectNo:SiteConfig.account.projectNo,
                   }
               }else {
                   param={
                       pagesize:5,
                       userId:SiteConfig.account.id
                   }
               }
                HttpUtil.get('Patrolexcute/getRiskStatus',param).success((r)=>{
                    for (let i = 0;i<r.data.length;i++){
                        r.data[i].processText = r.data[i].processflag == 0?'未巡查':r.data[i].processflag == 2?'已巡查':'超时未巡查'
                    }
                    this.patrol_list = r.data;
                })
            },
            showBbs(index){
                window.open('notice-manage/notice-detail.html?bbsId='+this.bbsData[index].BbsId);
            },
            goHistory(){
               parent.vuePageIndex.onClickMenu( {
                   title: '风险巡查历史记录',
                   url: 'pages/prevention/hiddendanger-manage/riskpatrolHistory.html',
               })
            },
            goWarning(){
                parent.vuePageIndex.onClickMenu( {
                    title: '风险隐患台账',
                    url: 'pages/prevention/warning-manage/warningbill.html',
                })
            },
            getCount(){
                let param = {

                }
                if (SiteConfig.account.roleId == 2 ){
                    param={
                        projectNo:SiteConfig.account.projectNo,
                    }
                    HttpUtil.get('CompanyBbs/CampusSummaryByProjectNo',param).success((r)=>{
                        this.summaryData = r.data[0];
                        this.summaryData.risk_percent = parseInt(r.data[0].riskdealted+r.data[0].riskondealt) == 0 ? 0 : parseInt(r.data[0].riskondealt*100 / (r.data[0].riskdealted+r.data[0].riskondealt));
                        this.summaryData.wf_percent = parseInt(r.data[0].wfdealted + r.data[0].wfondealt) == 0 ? 0 : parseInt(r.data[0].wfondealt*100 / (r.data[0].wfdealted + r.data[0].wfondealt));
                        this.summaryData.train_percent = parseInt(r.data[0].trainreaded + r.data[0].trainnoread) == 0 ? 0 : parseInt(r.data[0].trainreaded*100 / (r.data[0].trainreaded + r.data[0].trainnoread));
                        this.summaryData.bbs_percent = parseInt(r.data[0].bbsreaded +r.data[0].bbsnoread ) == 0 ? 0 :parseInt(r.data[0].bbsreaded*100/(r.data[0].bbsreaded +r.data[0].bbsnoread) );
                    })
                }else {
                    param={
                        UserId:SiteConfig.account.id
                    }
                    HttpUtil.get('CompanyBbs/CampusSummaryByUserId',param).success((r)=>{
                        this.summaryData = r.data[0];
                        this.summaryData.risk_percent = parseInt(r.data[0].riskdealted+r.data[0].riskondealt) == 0 ? 0 : parseInt(r.data[0].riskondealt*100 / (r.data[0].riskdealted+r.data[0].riskondealt));
                        this.summaryData.wf_percent = parseInt(r.data[0].wfdealted + r.data[0].wfondealt) == 0 ? 0 : parseInt(r.data[0].wfondealt*100 / (r.data[0].wfdealted + r.data[0].wfondealt));
                        this.summaryData.train_percent = parseInt(r.data[0].trainreaded + r.data[0].trainnoread) == 0 ? 0 : parseInt(r.data[0].trainreaded*100 / r.data[0].trainreaded + r.data[0].trainnoread);
                        this.summaryData.bbs_percent = parseInt(r.data[0].bbsreaded +r.data[0].bbsnoread ) == 0 ? 0 :parseInt(r.data[0].bbsreaded*100/(r.data[0].bbsreaded +r.data[0].bbsnoread) );
                    })
                }
            },
            goPage(val){
                 switch (val) {
                     case 'patrol':
                         parent.vuePageIndex.onClickMenu( {
                             title: '风险巡查',
                             url: 'pages/prevention/hiddendanger-manage/riskpatrol.html',
                         })
                         break;
                     case 'risk':
                         parent.vuePageIndex.onClickMenu( {
                             title: '风险隐患台账',
                             url: 'pages/prevention/warning-manage/warningbill.html',
                         })
                         break;
                     case 'train':
                         parent.vuePageIndex.onClickMenu( {
                             title: '培训计划',
                             url: 'pages/prevention/risk-train/trainplan.html',
                         })
                         break;
                     case 'bbs':
                         parent.vuePageIndex.onClickMenu( {
                             title: '收件箱',
                             url: 'pages/prevention/notice-manage/revice-notice.html',
                         })
                         break;
                 }
            }
        },
        created: function () {
            $('.page').show();
        },
        mounted: function () {
               this.drawChart();
               this.getBbs();
               this.getRisk();
               this.getCount();
        }
    });


    function getReport() {

    }

</script>

</body>
</html>
